<template>
  <el-card>
    <div
      style="margin-bottom:20px;width:100%;text-align: left;display: flex;flex-direction: row;justify-content: space-between;">
      <div>
        <el-button type="primary" @click="setCommonPriceBtn">公共基础材料定价</el-button>
        <el-button type="primary" @click="saveHistory">存档</el-button>
        <!--        <el-button type="primary" @click="exportExcel">导出Excel</el-button>-->
      </div>
      <el-radio-group style="text-align: right;" v-model="sortType" @change="changeSortType">
        <el-radio-button label="默认正序"></el-radio-button>
        <el-radio-button label="净利润倒序"></el-radio-button>
        <el-radio-button label="所需材料价值倒序"></el-radio-button>
        <el-radio-button label="市场价倒序"></el-radio-button>
        <el-radio-button label="每元气值利润倒序"></el-radio-button>
      </el-radio-group>
    </div>
    <hr/>
    <el-tabs v-model="activeName" type="card" @tab-click="handleClick">
      <el-tab-pane label="锻造" name="forge">
        <div style="width:100%;text-align: left;">
          <el-button type="success" @click="search">刷新</el-button>
          <el-button type="primary" @click="basicMaterialConfig" style="margin-left: 30px;">基础材料配置</el-button>
          <el-button type="primary" @click="alchemyConfig(1)">锻造配置</el-button>
          <hr/>
        </div>
        <div style="margin:10px 0 10px 0;width:100%;text-align: left;">
          <el-radio-group v-model="radio1" @change="changeRadio">
            <el-radio-button label="全部"></el-radio-button>
            <el-radio-button label="青云门武器"></el-radio-button>
            <el-radio-button label="鬼王宗武器"></el-radio-button>
            <el-radio-button label="合欢派武器"></el-radio-button>
            <el-radio-button label="焚香谷武器"></el-radio-button>
            <el-radio-button label="灵汐阁武器"></el-radio-button>
            <el-radio-button label="鬼王宗头脚上手腰"></el-radio-button>
            <el-radio-button label="合欢派头脚上手腰"></el-radio-button>
            <el-radio-button label="礼物"></el-radio-button>
            <el-radio-button label="消耗品"></el-radio-button>
          </el-radio-group>
        </div>
        <el-table :data="tableData" border>
          <el-table-column label="名称" prop="life_name" min-width="300" align="center"></el-table-column>
          <el-table-column label="所需材料价值" prop="cost" min-width="200" align="center"></el-table-column>
          <el-table-column label="市场价" prop="price" min-width="200" align="center"></el-table-column>
          <el-table-column label="利润" prop="profit" min-width="200" align="center">
            <template slot-scope="scope">
              <el-tag v-if="scope.row.profit > 2000" type="success" @click="viewProfitTrend(scope.row)">
                {{scope.row.profit}}
              </el-tag>
              <el-tag v-else-if="scope.row.profit >= 0" type="info" @click="viewProfitTrend(scope.row)">
                {{scope.row.profit}}
              </el-tag>
              <el-tag v-else type="danger" @click="viewProfitTrend(scope.row)">{{scope.row.profit}}</el-tag>
            </template>
          </el-table-column>
          <el-table-column label="净利润（扣除5%后）" prop="net_profit" min-width="200" align="center"></el-table-column>
          <el-table-column label="每元气值利润" prop="rate" min-width="200" align="center"></el-table-column>
          <el-table-column label="操作" prop="op" width="300" align="center">
            <template slot-scope="scope">
              <el-button type="primary" size="mini" @click="editPrice(scope.row)">修改市场价</el-button>
              <el-button type="primary" size="mini" @click="calBuy(scope.row)">计算购买量</el-button>
            </template>
          </el-table-column>
        </el-table>

        <el-pagination layout="prev, pager, next" :current-page="params.page" :page-size="params.rows"
                       :page-count="6"
                       :total="total" @current-change="searchPage"></el-pagination>
      </el-tab-pane>
      <el-tab-pane label="缝纫" name="sew">
        <div style="width:100%;text-align: left;">
          <el-button type="success" @click="search">刷新</el-button>
          <el-button type="primary" @click="basicMaterialConfig" style="margin-left: 30px;">基础材料配置</el-button>
          <el-button type="primary" @click="alchemyConfig(2)">缝纫配置</el-button>
          <hr/>
        </div>
        <div style="margin:10px 0 10px 0;width:100%;text-align: left;">
          <el-radio-group v-model="radio2" @change="changeRadio">
            <el-radio-button label="全部"></el-radio-button>
            <el-radio-button label="包裹"></el-radio-button>
            <el-radio-button label="青云门头脚上手腰"></el-radio-button>
            <el-radio-button label="焚香谷头脚上手腰"></el-radio-button>
            <el-radio-button label="灵汐阁头脚上手腰"></el-radio-button>
            <el-radio-button label="礼物"></el-radio-button>
            <el-radio-button label="消耗品"></el-radio-button>
          </el-radio-group>
        </div>
        <el-table :data="tableData" border>
          <el-table-column label="名称" prop="life_name" min-width="300" align="center"></el-table-column>
          <el-table-column label="所需材料价值" prop="cost" min-width="200" align="center"></el-table-column>
          <el-table-column label="市场价" prop="price" min-width="200" align="center"></el-table-column>
          <el-table-column label="利润" prop="profit" min-width="200" align="center">
            <template slot-scope="scope">
              <el-tag v-if="scope.row.profit > 2000" type="success" @click="viewProfitTrend(scope.row)">
                {{scope.row.profit}}
              </el-tag>
              <el-tag v-else-if="scope.row.profit >= 0" type="info" @click="viewProfitTrend(scope.row)">
                {{scope.row.profit}}
              </el-tag>
              <el-tag v-else type="danger" @click="viewProfitTrend(scope.row)">{{scope.row.profit}}</el-tag>
            </template>
          </el-table-column>
          <el-table-column label="净利润（扣除5%后）" prop="net_profit" min-width="200" align="center"></el-table-column>
          <el-table-column label="每元气值利润" prop="rate" min-width="200" align="center"></el-table-column>
          <el-table-column label="操作" prop="op" width="300" align="center">
            <template slot-scope="scope">
              <el-button type="primary" size="mini" @click="editPrice(scope.row)">修改市场价</el-button>
              <el-button type="primary" size="mini" @click="calBuy(scope.row)">计算购买量</el-button>
            </template>
          </el-table-column>
        </el-table>

        <el-pagination layout="prev, pager, next" :current-page="params.page" :page-size="params.rows"
                       :page-count="6"
                       :total="total" @current-change="searchPage"></el-pagination>
      </el-tab-pane>
      <el-tab-pane label="炼药" name="alchemy">
        <div style="width:100%;text-align: left;">
          <el-button type="success" @click="search">刷新</el-button>
          <el-button type="primary" @click="basicMaterialConfig" style="margin-left: 30px;">基础材料配置</el-button>
          <el-button type="primary" @click="alchemyConfig(3)">炼药配置</el-button>
          <hr/>
        </div>
        <div style="margin:10px 0 10px 0;width:100%;text-align: left;">
          <el-radio-group v-model="radio3" @change="changeRadio">
            <el-radio-button label="全部"></el-radio-button>
            <el-radio-button label="丹药"></el-radio-button>
            <el-radio-button label="灵药"></el-radio-button>
            <el-radio-button label="礼物"></el-radio-button>
          </el-radio-group>
        </div>
        <el-table :data="tableData" border>
          <el-table-column label="名称" prop="life_name" min-width="300" align="center"></el-table-column>
          <el-table-column label="所需材料价值" prop="cost" min-width="200" align="center"></el-table-column>
          <el-table-column label="市场价" prop="price" min-width="200" align="center"></el-table-column>
          <el-table-column label="利润" prop="profit" min-width="200" align="center">
            <template slot-scope="scope">
              <el-tag v-if="scope.row.profit > 2000" type="success" @click="viewProfitTrend(scope.row)">
                {{scope.row.profit}}
              </el-tag>
              <el-tag v-else-if="scope.row.profit >= 0" type="info" @click="viewProfitTrend(scope.row)">
                {{scope.row.profit}}
              </el-tag>
              <el-tag v-else type="danger" @click="viewProfitTrend(scope.row)">{{scope.row.profit}}</el-tag>
            </template>
          </el-table-column>
          <el-table-column label="净利润（扣除5%后）" prop="net_profit" min-width="200" align="center"></el-table-column>
          <el-table-column label="每元气值利润" prop="rate" min-width="200" align="center"></el-table-column>
          <el-table-column label="操作" prop="op" width="300" align="center">
            <template slot-scope="scope">
              <el-button type="primary" size="mini" @click="editPrice(scope.row)">修改市场价</el-button>
              <el-button type="primary" size="mini" @click="calBuy(scope.row)">计算购买量</el-button>
            </template>
          </el-table-column>
        </el-table>

        <el-pagination layout="prev, pager, next" :current-page="params.page" :page-size="params.rows"
                       :page-count="6"
                       :total="total" @current-change="searchPage"></el-pagination>
      </el-tab-pane>
      <el-tab-pane label="烹饪" name="cooking">
        <div style="width:100%;text-align: left;">
          <el-button type="success" @click="search">刷新</el-button>
          <el-button type="primary" @click="basicMaterialConfig" style="margin-left: 30px;">基础材料配置</el-button>
          <el-button type="primary" @click="alchemyConfig(4)">烹饪配置</el-button>
          <hr/>
        </div>
        <div style="margin:10px 0 10px 0;width:100%;text-align: left;">
          <el-radio-group v-model="radio4" @change="changeRadio">
            <el-radio-button label="全部"></el-radio-button>
            <el-radio-button label="烹饪"></el-radio-button>
            <el-radio-button label="礼物"></el-radio-button>
            <el-radio-button label="帮派相关"></el-radio-button>
          </el-radio-group>
        </div>
        <el-table :data="tableData" border>
          <el-table-column label="名称" prop="life_name" min-width="300" align="center"></el-table-column>
          <el-table-column label="所需材料价值" prop="cost" min-width="200" align="center"></el-table-column>
          <el-table-column label="市场价" prop="price" min-width="200" align="center"></el-table-column>
          <el-table-column label="利润" prop="profit" min-width="200" align="center">
            <template slot-scope="scope">
              <el-tag v-if="scope.row.profit > 2000" type="success" @click="viewProfitTrend(scope.row)">
                {{scope.row.profit}}
              </el-tag>
              <el-tag v-else-if="scope.row.profit >= 0" type="info" @click="viewProfitTrend(scope.row)">
                {{scope.row.profit}}
              </el-tag>
              <el-tag v-else type="danger" @click="viewProfitTrend(scope.row)">{{scope.row.profit}}</el-tag>
            </template>
          </el-table-column>
          <el-table-column label="净利润（扣除5%后）" prop="net_profit" min-width="200" align="center"></el-table-column>
          <el-table-column label="每元气值利润" prop="rate" min-width="200" align="center"></el-table-column>
          <el-table-column label="操作" prop="op" width="300" align="center">
            <template slot-scope="scope">
              <el-button type="primary" size="mini" @click="editPrice(scope.row)">修改市场价</el-button>
              <el-button type="primary" size="mini" @click="calBuy(scope.row)">计算购买量</el-button>
            </template>
          </el-table-column>
        </el-table>

        <el-pagination layout="prev, pager, next" :current-page="params.page" :page-size="params.rows"
                       :page-count="6"
                       :total="total" @current-change="searchPage"></el-pagination>
      </el-tab-pane>
      <el-tab-pane label="雕刻" name="engrave">
        <div style="width:100%;text-align: left;">
          <el-button type="success" @click="search">刷新</el-button>
          <el-button type="primary" @click="basicMaterialConfig" style="margin-left: 30px;">基础材料配置</el-button>
          <el-button type="primary" @click="alchemyConfig(5)">雕刻配置</el-button>
          <hr/>
        </div>
        <div style="margin:10px 0 10px 0;width:100%;text-align: left;">
          <el-radio-group v-model="radio5" @change="changeRadio">
            <el-radio-button label="全部"></el-radio-button>
            <el-radio-button label="护符"></el-radio-button>
            <el-radio-button label="法印"></el-radio-button>
            <el-radio-button label="令牌"></el-radio-button>
            <el-radio-button label="礼物"></el-radio-button>
            <el-radio-button label="消耗品"></el-radio-button>
            <el-radio-button label="鱼竿"></el-radio-button>
            <el-radio-button label="乐器"></el-radio-button>
            <el-radio-button label="对抗灌注符"></el-radio-button>
            <el-radio-button label="秘境灌注符"></el-radio-button>
          </el-radio-group>
        </div>
        <el-table :data="tableData" border @row-dblclick="mainTableDbEvent">
          <el-table-column label="名称" prop="life_name" min-width="300" align="center"></el-table-column>
          <el-table-column label="所需材料价值" prop="cost" min-width="200" align="center"></el-table-column>
          <el-table-column label="市场价" prop="price" min-width="200" align="center"></el-table-column>
          <el-table-column label="利润" prop="profit" min-width="200" align="center">
            <template slot-scope="scope">
              <el-tag v-if="scope.row.profit > 2000" type="success" @click="viewProfitTrend(scope.row)">
                {{scope.row.profit}}
              </el-tag>
              <el-tag v-else-if="scope.row.profit >= 0" type="info" @click="viewProfitTrend(scope.row)">
                {{scope.row.profit}}
              </el-tag>
              <el-tag v-else type="danger" @click="viewProfitTrend(scope.row)">{{scope.row.profit}}</el-tag>
            </template>
          </el-table-column>
          <el-table-column label="净利润（扣除5%后）" prop="net_profit" min-width="200" align="center"></el-table-column>
          <el-table-column label="每元气值利润" prop="rate" min-width="200" align="center"></el-table-column>
          <el-table-column label="操作" prop="op" width="300" align="center">
            <template slot-scope="scope">
              <el-button type="primary" size="mini" @click="editPrice(scope.row)">修改市场价</el-button>
              <el-button type="primary" size="mini" @click="calBuy(scope.row)">计算购买量</el-button>
            </template>
          </el-table-column>
        </el-table>

        <el-pagination layout="prev, pager, next" :current-page="params.page" :page-size="params.rows"
                       :page-count="6"
                       :total="total" @current-change="searchPage"></el-pagination>
      </el-tab-pane>
    </el-tabs>

    <!--  公共基础材料定价  -->
    <el-dialog top="10vh" :visible="showCommonBasicMaterialModal" width="800px"
               @close="showCommonBasicMaterialModal = false">
      <div slot="title" style="text-align: left;font-size: 20px;">公共基础材料定价</div>
      <!--      <div style="display: flex;justify-content: left;">-->
      <!--        <el-input v-model.trim="commonMaterialParams.keyword" placeholder="名称" clearable style="width:200px;"-->
      <!--                  @keyup.enter.native="searchCommon"></el-input>-->
      <!--        <el-button type="primary" @click="searchCommon">搜索</el-button>-->
      <!--      </div>-->
      <el-table :data="commonMaterialData" border>
        <el-table-column label="材料名称" prop="name" min-width="120" align="center"></el-table-column>
        <el-table-column label="材料价格" prop="price" min-width="120" align="center"></el-table-column>
        <el-table-column label="操作" prop="op" width="300" align="center">
          <template slot-scope="scope">
            <el-button type="primary" size="mini" @click="autoSetPrice(scope.row)">一键定价</el-button>
          </template>
        </el-table-column>
      </el-table>

      <el-pagination layout="prev, pager, next" :current-page="commonMaterialParams.page"
                     :page-size="commonMaterialParams.rows"
                     :page-count="6"
                     :total="commonMaterialTotal" @current-change="searchCommonPage"></el-pagination>
    </el-dialog>

    <!--  定价  -->
    <el-dialog :visible="showMergeCommonBasicMaterialDialog" width="450px"
               @close="showMergeCommonBasicMaterialDialog = false">
      <div slot="title" style="text-align: left;font-size: 20px;">一键定价</div>

      <el-form ref="autoPriceForm" label-position="left" label-width="100px" :model="autoPriceFormData"
               :rules="autoPriceRules">
        <el-form-item label="材料名称：" prop="name">
          <el-input v-model.trim="autoPriceFormData.name" disabled style="width:300px;"></el-input>
        </el-form-item>
        <el-form-item label="材料价格：" prop="price">
          <el-input v-model.number="autoPriceFormData.price" type="number" style="width:300px;"
                    maxlength="9" @keyup.native.enter="saveAutoPrice"></el-input>
        </el-form-item>
      </el-form>

      <span slot="footer">
        <el-button @click="showMergeCommonBasicMaterialDialog = false">取 消</el-button>
        <el-button type="primary" @click="saveAutoPrice">确 定</el-button>
      </span>
    </el-dialog>

    <!--  基础材料  -->
    <el-dialog top="10vh" :visible="showBasicMaterialModal" width="800px" @close="showBasicMaterialModal = false">
      <div slot="title" style="text-align: left;font-size: 20px;">基础材料配置</div>
      <div style="float:left;margin:10px 0;">
        <el-button type="primary" @click="addBasicMaterial">新增</el-button>
      </div>
      <el-table :data="materialData" border>
        <el-table-column label="材料名称" prop="name" min-width="120" align="center"></el-table-column>
        <el-table-column label="材料价格" prop="price" min-width="120" align="center"></el-table-column>
        <el-table-column label="操作" prop="op" width="300" align="center">
          <template slot-scope="scope">
            <el-button type="primary" size="mini" @click="editMaterial(scope.row)">编辑</el-button>
            <el-button type="danger" size="mini" @click="delMaterial(scope.row)">删除</el-button>
          </template>
        </el-table-column>
      </el-table>

      <el-pagination layout="prev, pager, next" :current-page="materialParams.page" :page-size="materialParams.rows"
                     :page-count="6"
                     :total="materialTotal" @current-change="searchMaterialPage"></el-pagination>
    </el-dialog>

    <!--  基础材料编辑  -->
    <el-dialog :visible="showMergeBasicMaterialDialog" width="450px" @close="showMergeBasicMaterialDialog = false">
      <div slot="title" style="text-align: left;font-size: 20px;">{{opBasicMaterialTitle}}</div>

      <el-form ref="basicMaterialForm" label-position="left" label-width="100px" :model="basicMaterialFormData"
               :rules="basicMaterialRules">
        <el-form-item label="材料名称：" prop="name">
          <el-input v-model.trim="basicMaterialFormData.name" style="width:300px;"></el-input>
        </el-form-item>
        <el-form-item label="材料价格：" prop="price">
          <el-input v-model.number="basicMaterialFormData.price" type="number" style="width:300px;"
                    maxlength="9" @keyup.native.enter="saveBasicMaterial"></el-input>
        </el-form-item>
      </el-form>

      <span slot="footer">
        <el-button @click="showMergeBasicMaterialDialog = false">取 消</el-button>
        <el-button type="primary" @click="saveBasicMaterial">确 定</el-button>
      </span>
    </el-dialog>


    <!--  监测数据编辑  -->
    <el-dialog :visible="showMergeAlchemyMonitorDialog" width="450px" @close="showMergeAlchemyMonitorDialog = false">
      <div slot="title" style="text-align: left;font-size: 20px;">修改市场价</div>

      <el-form ref="alchemyMonitorForm" label-position="left" label-width="100px" :model="alchemyMonitorFormData"
               :rules="alchemyMonitorRules">
        <el-form-item label="成品名称：" prop="alchemy_name">
          <el-input v-model.trim="alchemyMonitorFormData.alchemy_name" disabled style="width:300px;"></el-input>
        </el-form-item>
        <el-form-item label="市场价：" prop="price">
          <el-input v-model.number="alchemyMonitorFormData.price" type="number" style="width:300px;"
                    maxlength="9" @keyup.native.enter="savePrice"></el-input>
        </el-form-item>
      </el-form>

      <span slot="footer">
        <el-button @click="showMergeAlchemyMonitorDialog = false">取 消</el-button>
        <el-button type="primary" @click="savePrice">确 定</el-button>
      </span>
    </el-dialog>

    <!--  监测数据计算购买数量  -->
    <el-dialog :visible="showCalBuyDialog" width="500px" @close="showCalBuyDialog = false">
      <div slot="title" style="text-align: left;font-size: 20px;">计算购买基础材料数量</div>

      <div style="margin-bottom:20px;display: flex;justify-content: left;align-items: center;">
        成品名称：{{calSumByYLZ.name}}
      </div>
      <el-table :data="calBuyMaterialableData" border>
        <el-table-column label="基础材料名称" prop="name" min-width="100" align="center"></el-table-column>
        <el-table-column label="单价" prop="price" min-width="100" align="center"></el-table-column>
        <el-table-column label="采购数量" prop="count" min-width="100" align="center"></el-table-column>
      </el-table>

      <div style="margin-top:20px;display: flex;justify-content: left;align-items: center;">
        预计消耗原力值：
        <el-input v-model.number="calSumByYLZ.YLZ" type="number" style="width:200px;"
                  maxlength="9" placeholder="原力值" @keyup.enter.native="calBuyMaterial"></el-input>
      </div>
      <div style="margin-top:20px;display: flex;justify-content: left;align-items: center;">
        预计花费银两：
        <el-input v-model.number="calSumByYLZ.money" type="number" disabled style="width:200px;"></el-input>
      </div>
      <span slot="footer">
<!--          <el-button @click="showCalBuyDialog = false">取 消</el-button>-->
          <el-button type="primary" @click="calBuyMaterial">确 定</el-button>
        </span>
    </el-dialog>


    <!--  成品配置  -->
    <el-dialog top="10vh" :visible="showAlchemyModal" width="1600px" @close="showAlchemyModal = false">
      <div slot="title" style="text-align: left;font-size: 20px;">成品配置</div>
      <div style="width:100%;text-align: left;">
        <el-button type="primary" @click="addAlchemy">新增</el-button>
      </div>
      <div style="margin:20px 0 10px 0;width:100%;text-align: left;">
        <el-radio-group v-if="activeName == 'forge'" v-model="configRadio1" @change="changeConfigRadio">
          <el-radio-button label="全部"></el-radio-button>
          <el-radio-button label="青云门武器"></el-radio-button>
          <el-radio-button label="鬼王宗武器"></el-radio-button>
          <el-radio-button label="合欢派武器"></el-radio-button>
          <el-radio-button label="焚香谷武器"></el-radio-button>
          <el-radio-button label="灵汐阁武器"></el-radio-button>
          <el-radio-button label="鬼王宗头脚上手腰"></el-radio-button>
          <el-radio-button label="合欢派头脚上手腰"></el-radio-button>
          <el-radio-button label="礼物"></el-radio-button>
          <el-radio-button label="消耗品"></el-radio-button>
        </el-radio-group>
        <el-radio-group v-if="activeName == 'sew'" v-model="configRadio2" @change="changeConfigRadio">
          <el-radio-button label="全部"></el-radio-button>
          <el-radio-button label="包裹"></el-radio-button>
          <el-radio-button label="青云门头脚上手腰"></el-radio-button>
          <el-radio-button label="焚香谷头脚上手腰"></el-radio-button>
          <el-radio-button label="灵汐阁头脚上手腰"></el-radio-button>
          <el-radio-button label="礼物"></el-radio-button>
          <el-radio-button label="消耗品"></el-radio-button>
        </el-radio-group>
        <el-radio-group v-if="activeName == 'alchemy'" v-model="configRadio3" @change="changeConfigRadio">
          <el-radio-button label="全部"></el-radio-button>
          <el-radio-button label="丹药"></el-radio-button>
          <el-radio-button label="灵药"></el-radio-button>
          <el-radio-button label="礼物"></el-radio-button>
        </el-radio-group>
        <el-radio-group v-if="activeName == 'cooking'" v-model="configRadio4" @change="changeConfigRadio">
          <el-radio-button label="全部"></el-radio-button>
          <el-radio-button label="烹饪"></el-radio-button>
          <el-radio-button label="礼物"></el-radio-button>
          <el-radio-button label="帮派相关"></el-radio-button>
        </el-radio-group>
        <el-radio-group v-if="activeName == 'engrave'" v-model="configRadio5" @change="changeConfigRadio">
          <el-radio-button label="全部"></el-radio-button>
          <el-radio-button label="护符"></el-radio-button>
          <el-radio-button label="法印"></el-radio-button>
          <el-radio-button label="令牌"></el-radio-button>
          <el-radio-button label="礼物"></el-radio-button>
          <el-radio-button label="消耗品"></el-radio-button>
          <el-radio-button label="鱼竿"></el-radio-button>
          <el-radio-button label="乐器"></el-radio-button>
          <el-radio-button label="对抗灌注符"></el-radio-button>
          <el-radio-button label="秘境灌注符"></el-radio-button>
        </el-radio-group>
      </div>
      <el-table :data="alchemyData" border>
        <el-table-column label="名称" prop="name" min-width="120" align="center"></el-table-column>
        <el-table-column label="类别" prop="tab" min-width="120" align="center"></el-table-column>
        <el-table-column label="需求等级" prop="grade" min-width="120" align="center"></el-table-column>
        <el-table-column label="炼制消耗元力值" prop="consume" min-width="120" align="center"></el-table-column>
        <el-table-column label="所需材料1" prop="material1_content" min-width="120" align="center"></el-table-column>
        <el-table-column label="所需材料2" prop="material2_content" min-width="120" align="center"></el-table-column>
        <el-table-column label="所需材料3" prop="material3_content" min-width="120" align="center"></el-table-column>
        <el-table-column label="所需材料4" prop="material4_content" min-width="120" align="center"></el-table-column>
        <el-table-column label="所需材料5" prop="material5_content" min-width="120" align="center"></el-table-column>
        <el-table-column label="操作" prop="op" width="160" align="center">
          <template slot-scope="scope">
            <el-button type="primary" size="mini" @click="editAlchemy(scope.row)">编辑</el-button>
            <el-button type="danger" size="mini" @click="delAlchemy(scope.row)">删除</el-button>
          </template>
        </el-table-column>
      </el-table>

      <el-pagination layout="prev, pager, next" :current-page="alchemyParams.page" :page-size="alchemyParams.rows"
                     :page-count="6"
                     :total="alchemyTotal" @current-change="searchAlchemyPage"></el-pagination>
    </el-dialog>

    <!--  成品配置编辑  -->
    <el-dialog top="12vh" :visible="showMergeAlchemyDialog" width="520px" @close="showMergeAlchemyDialog = false">
      <div slot="title" style="text-align: left;font-size: 20px;">{{opAlchemyTitle}}</div>

      <el-form ref="alchemyForm" label-width="160px" :model="alchemyFormData"
               :rules="alchemyRules">
        <el-form-item label="成品名称：" prop="name">
          <el-input v-model.trim="alchemyFormData.name" style="width:300px;" maxlength="50"></el-input>
        </el-form-item>
        <el-form-item label="成品类别：" prop="tab">
          <el-select v-model="alchemyFormData.tab" placeholder="请选择成品类别" style="width:300px;">
            <el-option
              v-for="item in tabTypeList"
              :key="item.value"
              :label="item.label"
              :value="item.value">
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="成品需求等级：" prop="grade">
          <el-select v-model="alchemyFormData.grade" placeholder="请选择需求等级" style="width:300px;">
            <el-option
              v-for="item in gradeTypeList"
              :key="item.value"
              :label="item.label"
              :value="item.value">
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="炼制消耗元力值：" prop="consume">
          <el-input v-model.number="alchemyFormData.consume" type="number" style="width:300px;"
                    maxlength="3"></el-input>
        </el-form-item>
        <el-form-item label="所需材料1：" prop="material1_id">
          <el-select v-model="alchemyFormData.material1_id" filterable placeholder="请选择所需材料1" style="width:300px;">
            <el-option
              v-for="item in basicMaterialTypeList"
              :key="item.id"
              :label="item.name"
              :value="item.id">
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="所需材料1数量：" prop="count1">
          <el-input v-model.number="alchemyFormData.count1" type="number" style="width:300px;" maxlength="3"></el-input>
        </el-form-item>
        <el-form-item label="所需材料2：" prop="material2_id">
          <el-select v-model="alchemyFormData.material2_id" filterable placeholder="请选择所需材料2" style="width:300px;">
            <el-option
              v-for="item in basicMaterialTypeList"
              :key="item.id"
              :label="item.name"
              :value="item.id">
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="所需材料2数量：" prop="count2">
          <el-input v-model.number="alchemyFormData.count2" type="number" style="width:300px;" maxlength="3"></el-input>
        </el-form-item>
        <el-form-item label="所需材料3：" prop="material3_id">
          <el-select v-model="alchemyFormData.material3_id" filterable placeholder="请选择所需材料3" style="width:300px;">
            <el-option
              v-for="item in basicMaterialTypeList"
              :key="item.id"
              :label="item.name"
              :value="item.id">
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="所需材料3数量：" prop="count3">
          <el-input v-model.number="alchemyFormData.count3" type="number" style="width:300px;" maxlength="3"></el-input>
        </el-form-item>
        <el-form-item label="所需材料4：" prop="material4_id">
          <el-select v-model="alchemyFormData.material4_id" filterable placeholder="请选择所需材料4" style="width:300px;">
            <el-option
              v-for="item in basicMaterialTypeList"
              :key="item.id"
              :label="item.name"
              :value="item.id">
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="所需材料4数量：" prop="count4">
          <el-input v-model.number="alchemyFormData.count4" type="number" style="width:300px;" maxlength="3"></el-input>
        </el-form-item>
        <el-form-item label="所需材料5：" prop="material5_id">
          <el-select v-model="alchemyFormData.material5_id" filterable placeholder="请选择所需材料5" style="width:300px;">
            <el-option
              v-for="item in basicMaterialTypeList"
              :key="item.id"
              :label="item.name"
              :value="item.id">
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="所需材料5数量：" prop="count5">
          <el-input v-model.number="alchemyFormData.count5" type="number" style="width:300px;" maxlength="3"></el-input>
        </el-form-item>
      </el-form>

      <span slot="footer">
        <el-button @click="showMergeAlchemyDialog = false">取 消</el-button>
        <el-button type="primary" @click="saveAlchemy">确 定</el-button>
      </span>
    </el-dialog>

    <!--  成品最近十条价格趋势  -->
    <el-dialog :visible="showTrendModal" width="1200px" @close="showTrendModal = false">
      <div slot="title" style="text-align: left;font-size: 20px;">成品最近价格趋势</div>

      <div id="profit_trend_chart" style="width:100%;height:500px;"></div>
    </el-dialog>


  </el-card>
</template>

<script>
    import api from '../../../utils/api';
    import * as echarts from 'echarts';

    export default {
        name: "TradeHouse",
        data() {
            return {
                // 公共材料
                showCommonBasicMaterialModal: false,
                commonMaterialParams: {
                    rows: 15,
                    page: 1,
                    keyword: ''
                },
                commonMaterialTotal: 0,
                commonMaterialData: [],

                showMergeCommonBasicMaterialDialog: false,
                autoPriceFormData: {},
                autoPriceRules: {
                    price: [
                        {required: true, type: 'number', message: '请输入定价', trigger: 'blur'}
                    ],
                },


                activeName: 'forge',// forge-锻造 sew-缝纫 alchemy-炼药 cooking-烹饪 engrave-雕刻
                sortType: '默认正序',// 1-默认正序 2-净利润倒序 3-所需材料价值倒序 4-市场价倒序 5-每元气值利润倒序

                radio1: '全部',
                radio2: '全部',
                radio3: '全部',
                radio4: '全部',
                radio5: '全部',
                params: {
                    rows: 15,
                    page: 1,
                    type: 1,// 1-锻造 2-缝纫 3-炼药 4-烹饪 5-雕刻
                    keyword: '',
                    sort_type: 1
                },
                total: 0,
                tableData: [],

                // 系统监测数据编辑
                showMergeAlchemyMonitorDialog: false,
                alchemyMonitorFormData: {},
                alchemyMonitorRules: {
                    price: [
                        {required: true, type: 'number', message: '请输入市场价', trigger: 'blur'}
                    ],
                },

                // 生活配置计算购买数量
                showCalBuyDialog: false,
                oneLifeConfigData: {},
                calBuyMaterialableData: [],
                calBuyMaterialableDataBack: [],//深拷贝，预留计算
                calSumByYLZ: {
                    name: '',
                    YLZ: 0,
                    money: 0
                },


                // 基础材料配置
                showBasicMaterialModal: false,
                materialParams: {
                    rows: 15,
                    page: 1,
                    keyword: '',
                },
                materialData: [],
                materialTotal: 0,

                // 基础材料编辑
                showMergeBasicMaterialDialog: false,
                opBasicMaterialType: 1,//1新增 2编辑 3详情
                opBasicMaterialTitle: '',
                basicMaterialFormData: {},
                basicMaterialRules: {
                    name: [
                        {required: true, message: '请输入名称', trigger: 'blur'}
                    ],
                    price: [
                        {required: true, type: 'number', message: '请输入价格', trigger: 'blur'}
                    ],
                },

                // 炼丹配置
                configRadio1: '全部',
                configRadio2: '全部',
                configRadio3: '全部',
                configRadio4: '全部',
                configRadio5: '全部',
                showAlchemyModal: false,
                alchemyParams: {
                    rows: 15,
                    page: 1,
                    type: 1,
                    keyword: '',
                },
                alchemyData: [],
                alchemyTotal: 0,

                // 炼丹配置编辑
                showMergeAlchemyDialog: false,
                alchemyTypeList: [
                    {label: '白色', value: '白色'},
                    {label: '绿色', value: '绿色'},
                    {label: '紫色', value: '紫色'},
                    {label: '金色', value: '金色'}
                ],
                tabTypeList: [
                    {label: '青云门武器', value: '青云门武器'},
                    {label: '鬼王宗武器', value: '鬼王宗武器'},
                    {label: '合欢派武器', value: '合欢派武器'},
                    {label: '焚香谷武器', value: '焚香谷武器'},
                    {label: '灵汐阁武器', value: '灵汐阁武器'},
                    {label: '鬼王宗头脚上手腰', value: '鬼王宗头脚上手腰'},
                    {label: '合欢派头脚上手腰', value: '合欢派头脚上手腰'},
                    {label: '礼物', value: '礼物'},
                    {label: '消耗品', value: '消耗品'}
                ],
                gradeTypeList: [
                    {label: '1级', value: 1},
                    {label: '5级', value: 5},
                    {label: '10级', value: 10},
                    {label: '15级', value: 15},
                    {label: '20级', value: 20}
                ],
                basicMaterialTypeList: [],//获取全部的基础材料
                opAlchemyType: 1,//1新增 2编辑 3详情
                opAlchemyTitle: '',
                alchemyFormData: {},
                alchemyRules: {
                    name: [
                        {required: true, message: '请输入名称', trigger: 'blur'}
                    ],
                    consume: [
                        {required: true, type: 'number', message: '请输入炼制消耗元力值'}
                    ],
                    material1_id: [
                        {required: true, message: '请选择所需材料1', trigger: 'change'}
                    ],
                    count1: [
                        {required: true, type: 'number', message: '请输入所需材料1数量'}
                    ],
                },

                // 成品最近十条价格趋势
                showTrendModal: false,
            }
        },
        methods: {
            // 导出Excel
            exportExcel() {
                var that = this;
                api.ajax.get('/life/download').then((result) => {
                    that.$alert("导出基础材料信息成功", '成功!');
                }, function (result) {
                    that.$alert("导出基础材料信息异常", '失败!');
                })
            },
            // 存档
            saveHistory() {
                var that = this;
                api.ajax.post('/life/monitor/history/save').then((result) => {
                    that.$alert("存档成功", '成功!');
                }, function (result) {
                    that.$alert("存档异常", '失败!');
                })
            },
            // 公共基础材料
            setCommonPriceBtn() {
                this.showCommonBasicMaterialModal = true;
                this.searchCommon();
            },
            searchCommon() {
                this.commonMaterialParams.page = 1;
                this.searchCommonPage(1);
            },
            searchCommonPage(page) {
                var that = this;
                that.commonMaterialParams.page = page;
                api.ajax.get('/material/common/page/' + that.commonMaterialParams.rows + '/' + that.commonMaterialParams.page + '?keyword=' + that.commonMaterialParams.keyword).then((result) => {
                    var data = result.data;
                    that.commonMaterialData = data.list;
                    that.commonMaterialTotal = data.total;
                }, function (result) {
                    that.$alert("获取公共基础材料列表异常", '失败!');
                })
            },
            autoSetPrice(row) {
                this.autoPriceFormData = {
                    name: row.name,
                    price: row.price
                }
                this.showMergeCommonBasicMaterialDialog = true;
            },
            saveAutoPrice() {
                var that = this;
                this.$refs["autoPriceForm"].validate((valid) => {
                    if (valid) {
                        api.ajax.post('material/update/price', that.autoPriceFormData)
                            .then((result) => {
                                if (result.status == 200) {
                                    that.$message.success('一键定价成功');
                                    that.showMergeCommonBasicMaterialDialog = false;
                                    that.searchCommon();
                                } else {
                                    that.$message(result.msg);
                                }
                            }, (result) => {
                                that.$alert("一键定价异常", '失败!');
                            })
                    }
                })
            },

            // 切换生活tab
            handleClick(tab) {
                this.activeName = tab.name;
                if (this.activeName == 'forge') {
                    this.params.type = 1;
                    this.radio1 = '全部';
                    this.tabTypeList = [
                        {label: '青云门武器', value: '青云门武器'},
                        {label: '鬼王宗武器', value: '鬼王宗武器'},
                        {label: '合欢派武器', value: '合欢派武器'},
                        {label: '焚香谷武器', value: '焚香谷武器'},
                        {label: '灵汐阁武器', value: '灵汐阁武器'},
                        {label: '鬼王宗头脚上手腰', value: '鬼王宗头脚上手腰'},
                        {label: '合欢派头脚上手腰', value: '合欢派头脚上手腰'},
                        {label: '礼物', value: '礼物'},
                        {label: '消耗品', value: '消耗品'}
                    ]
                } else if (this.activeName == 'sew') {
                    this.params.type = 2;
                    this.radio2 = '全部';
                    this.tabTypeList = [
                        {label: '包裹', value: '包裹'},
                        {label: '青云门头脚上手腰', value: '青云门头脚上手腰'},
                        {label: '焚香谷头脚上手腰', value: '焚香谷头脚上手腰'},
                        {label: '灵汐阁头脚上手腰', value: '灵汐阁头脚上手腰'},
                        {label: '礼物', value: '礼物'},
                        {label: '消耗品', value: '消耗品'}
                    ]
                } else if (this.activeName == 'alchemy') {
                    this.params.type = 3;
                    this.radio3 = '全部';
                    this.tabTypeList = [
                        {label: '丹药', value: '丹药'},
                        {label: '灵药', value: '灵药'},
                        {label: '礼物', value: '礼物'}
                    ]
                } else if (this.activeName == 'cooking') {
                    this.params.type = 4;
                    this.radio4 = '全部';
                    this.tabTypeList = [
                        {label: '烹饪', value: '烹饪'},
                        {label: '礼物', value: '礼物'},
                        {label: '帮派相关', value: '帮派相关'}
                    ]
                } else if (this.activeName == 'engrave') {
                    this.params.type = 5;
                    this.radio5 = '全部';
                    this.tabTypeList = [
                        {label: '护符', value: '护符'},
                        {label: '法印', value: '法印'},
                        {label: '令牌', value: '令牌'},
                        {label: '礼物', value: '礼物'},
                        {label: '消耗品', value: '消耗品'},
                        {label: '鱼竿', value: '鱼竿'},
                        {label: '乐器', value: '乐器'},
                        {label: '对抗灌注符', value: '对抗灌注符'},
                        {label: '秘境灌注符', value: '秘境灌注符'}
                    ]
                }
                this.params.keyword = '';
                this.search();
            },
            changeSortType(val) {
                if (val == '默认正序') {
                    this.params.sort_type = 1;
                } else if (val == '净利润倒序') {
                    this.params.sort_type = 2;
                } else if (val == '所需材料价值倒序') {
                    this.params.sort_type = 3;
                } else if (val == '市场价倒序') {
                    this.params.sort_type = 4;
                } else if (val == '每元气值利润倒序') {
                    this.params.sort_type = 5;
                }
                this.search();
            },
            changeRadio(val) {
                if (val == '全部') {
                    this.params.keyword = '';
                } else {
                    this.params.keyword = val;
                }
                this.search();
            },
            search() {
                this.params.page = 1;
                this.searchPage(1);
            },
            searchPage(page) {
                var that = this;
                that.params.page = page;
                api.ajax.get('/life/monitor/page/' + that.params.rows + '/' + that.params.page + '?type=' + that.params.type + '&keyword=' + that.params.keyword + '&sortType=' + that.params.sort_type).then((result) => {
                    var data = result.data;
                    that.tableData = data.list;
                    that.total = data.total;
                }, function (result) {
                    that.$alert("获取分析列表异常", '失败!');
                })
            },
            // 主表格（成品）双击事件
            mainTableDbEvent(row, column, event) {
                this.editPrice(row);
            },
            // 查看趋势
            viewProfitTrend(row) {
                var that = this;
                that.showTrendModal = true;
                api.ajax.get('/life/monitor/history/get/trend/' + row.life_id).then((result) => {
                    var data = result.data;

                    // 绘制折线统计图
                    let historyNos = [], t1 = [], t2 = [], t3 = [];
                    for (let item of data) {
                        historyNos.push(item.history_no);
                        t1.push(item.cost);
                        t2.push(item.price);
                        t3.push(item.profit);
                    }
                    let series = [
                        {
                            name: '材料价值',
                            type: 'line',
                            stack: 'Total',
                            data: t1
                        },
                        {
                            name: '市场价',
                            type: 'line',
                            stack: 'Total',
                            data: t2
                        },
                        {
                            name: '利润',
                            type: 'line',
                            stack: 'Total',
                            data: t3
                        },
                    ]
                    that.getProfitTrendChart(row.life_name, historyNos, series);
                }, function (result) {
                    that.$alert("获取成品价格趋势异常", '失败!');
                })
            },
            // 查询最近十条价格趋势echart图表
            getProfitTrendChart(lifeName, historyNos, series) {
                var dataSourceMoneyLine = echarts.init(document.getElementById("profit_trend_chart"));
                let options = {
                    title: {
                        text: lifeName
                    },
                    tooltip: {
                        trigger: 'axis'
                    },
                    legend: {
                        data: ['材料价值', '市场价', '利润']
                    },
                    grid: {
                        left: '3%',
                        right: '4%',
                        bottom: '3%',
                        containLabel: true
                    },
                    toolbox: {
                        feature: {
                            saveAsImage: {}
                        }
                    },
                    xAxis: {
                        type: 'category',
                        boundaryGap: false,
                        data: historyNos
                    },
                    yAxis: {
                        type: 'value'
                    },
                    series: series
                };
                dataSourceMoneyLine.setOption(options);
                window.onresize = () => {
                    dataSourceMoneyLine.resize();
                }
            },
            // 修改监测的市场价
            editPrice(row) {
                this.alchemyMonitorFormData = {
                    id: row.id,
                    alchemy_name: row.life_name,
                    price: row.price
                }
                this.showMergeAlchemyMonitorDialog = true;
            },
            savePrice() {
                var that = this;
                this.$refs["alchemyMonitorForm"].validate((valid) => {
                    if (valid) {
                        api.ajax.post('life/monitor/update', that.alchemyMonitorFormData)
                            .then((result) => {
                                if (result.status == 200) {
                                    that.$message.success('修改成功');
                                    that.showMergeAlchemyMonitorDialog = false;
                                    that.searchPage(that.params.page);
                                } else {
                                    that.$message(result.msg);
                                }
                            }, (result) => {
                                that.$alert("修改异常", '失败!');
                            })
                    }
                })
            },
            // 计算购买基础材料数量
            calBuy(row) {
                this.calSumByYLZ.name = row.life_name;
                this.getOneLife(row.life_id);
                this.showCalBuyDialog = true;
            },
            getOneLife(lifeId) {
                var that = this;
                api.ajax.get('/life/get/one/' + lifeId).then((result) => {
                    that.calBuyMaterialableData = [];
                    var data = result.data;
                    that.oneLifeConfigData = data;
                    // 构造表格数据
                    if (that.oneLifeConfigData.count1 > 0) {
                        that.calBuyMaterialableData.push({
                            name: that.oneLifeConfigData.material1_name,
                            price: that.oneLifeConfigData.material1_price,
                            count: that.oneLifeConfigData.count1
                        });
                    }
                    if (that.oneLifeConfigData.count2 > 0) {
                        that.calBuyMaterialableData.push({
                            name: that.oneLifeConfigData.material2_name,
                            price: that.oneLifeConfigData.material2_price,
                            count: that.oneLifeConfigData.count2
                        });
                    }
                    if (that.oneLifeConfigData.count3 > 0) {
                        that.calBuyMaterialableData.push({
                            name: that.oneLifeConfigData.material3_name,
                            price: that.oneLifeConfigData.material3_price,
                            count: that.oneLifeConfigData.count3
                        });
                    }
                    if (that.oneLifeConfigData.count4 > 0) {
                        that.calBuyMaterialableData.push({
                            name: that.oneLifeConfigData.material4_name,
                            price: that.oneLifeConfigData.material4_price,
                            count: that.oneLifeConfigData.count4
                        });
                    }
                    if (that.oneLifeConfigData.count5 > 0) {
                        that.calBuyMaterialableData.push({
                            name: that.oneLifeConfigData.material5_name,
                            price: that.oneLifeConfigData.material5_price,
                            count: that.oneLifeConfigData.count5
                        });
                    }
                    // that.calBuyMaterialableData.push({
                    //     name: '总计',
                    //     price: ,
                    //     count: 1
                    // });
                    that.calBuyMaterialableDataBack = JSON.parse(JSON.stringify(that.calBuyMaterialableData));

                    // 所需消耗元力值
                    that.calSumByYLZ.YLZ = that.oneLifeConfigData.consume;

                    // 所需银两
                    that.calSumByYLZ.money = 0;
                    for (let item in that.calBuyMaterialableData) {
                        that.calSumByYLZ.money = that.calSumByYLZ.money + that.calBuyMaterialableData[item].count * that.calBuyMaterialableData[item].price;
                    }
                }, function (result) {
                    that.$alert("获取材料配置信息异常", '失败!');
                })
            },
            calBuyMaterial() {
                var that = this;
                let mul = that.calSumByYLZ.YLZ / that.oneLifeConfigData.consume;
                let realMul = parseInt(mul);
                for (let item in that.calBuyMaterialableData) {
                    that.calBuyMaterialableData[item].count = that.calBuyMaterialableDataBack[item].count * realMul;
                    console.log(that.calBuyMaterialableData[item].count)
                }
                // 所需银两
                that.calSumByYLZ.money = 0;
                for (let item in that.calBuyMaterialableData) {
                    that.calSumByYLZ.money = that.calSumByYLZ.money + that.calBuyMaterialableData[item].count * that.calBuyMaterialableData[item].price;
                }
            },

            // 基础材料
            basicMaterialConfig() {
                this.showBasicMaterialModal = true;
                this.searchMaterial();
            },
            searchMaterial() {
                this.materialParams.page = 1;
                this.searchMaterialPage(1);
            },
            searchMaterialPage(page) {
                var that = this;
                that.materialParams.page = page;
                let type = 1;
                if (this.activeName == 'forge') {
                    type = 1;
                } else if (this.activeName == 'sew') {
                    type = 2;
                } else if (this.activeName == 'alchemy') {
                    type = 3;
                } else if (this.activeName == 'cooking') {
                    type = 4;
                } else if (this.activeName == 'engrave') {
                    type = 5;
                }
                api.ajax.get('/material/page/' + that.materialParams.rows + '/' + that.materialParams.page + '?keyword=' + that.materialParams.keyword + '&type=' + type).then((result) => {
                    var data = result.data;
                    that.materialData = data.list;
                    that.materialTotal = data.total;
                }, function (result) {
                    that.$alert("获取基础材料列表异常", '失败!');
                })
            },
            addBasicMaterial() {
                this.opBasicMaterialType = 1;
                this.opBasicMaterialTitle = '新增';
                this.basicMaterialFormData = {
                    name: ''
                };
                this.showMergeBasicMaterialDialog = true;
            },
            saveBasicMaterial() {
                var that = this;
                this.$refs["basicMaterialForm"].validate((valid) => {
                    if (valid) {
                        if (this.opBasicMaterialType === 1) {
                            if (that.activeName == 'forge') {
                                that.basicMaterialFormData.type = 1;
                            } else if (that.activeName == 'sew') {
                                that.basicMaterialFormData.type = 2;
                            } else if (that.activeName == 'alchemy') {
                                that.basicMaterialFormData.type = 3;
                            } else if (that.activeName == 'cooking') {
                                that.basicMaterialFormData.type = 4;
                            } else if (that.activeName == 'engrave') {
                                that.basicMaterialFormData.type = 5;
                            }
                            api.ajax.post('material/add', that.basicMaterialFormData)
                                .then((result) => {
                                    if (result.status == 200) {
                                        that.$message.success('新增成功');
                                        that.showMergeBasicMaterialDialog = false;
                                        that.searchMaterial();
                                    } else {
                                        that.$message(result.msg);
                                    }
                                }, (result) => {
                                    that.$alert("新增异常", '失败!');
                                })
                        } else {
                            api.ajax.post('material/update', that.basicMaterialFormData)
                                .then((result) => {
                                    if (result.status == 200) {
                                        that.$message.success('修改成功');
                                        that.showMergeBasicMaterialDialog = false;
                                        that.searchMaterial();
                                    } else {
                                        that.$message(result.msg);
                                    }
                                }, (result) => {
                                    that.$alert("修改异常", '失败!');
                                })
                        }
                    } else {
                        return false;
                    }
                });
            },
            editMaterial(row) {
                this.opBasicMaterialType = 2;
                this.opBasicMaterialTitle = '编辑';
                this.basicMaterialFormData = {
                    id: row.id,
                    name: row.name,
                    price: row.price
                };
                this.showMergeBasicMaterialDialog = true;
            },
            delMaterial(row) {
                var that = this;
                api.ajax.delete('material/delete/' + row.id)
                    .then((result) => {
                        if (result.status == 200) {
                            that.$message.success('删除成功');
                            that.searchMaterial();
                        } else {
                            that.$message(result.msg);
                        }
                    }, (result) => {
                        that.$alert("删除异常", '失败!');
                    })
            },

            // 获取全部的基础材料
            getAllBasicMaterial() {
                var that = this;
                let type = 1;
                if (this.activeName == 'forge') {
                    type = 1;
                } else if (this.activeName == 'sew') {
                    type = 2;
                } else if (this.activeName == 'alchemy') {
                    type = 3;
                } else if (this.activeName == 'cooking') {
                    type = 4;
                } else if (this.activeName == 'engrave') {
                    type = 5;
                }
                api.ajax.get('/material/page/1000/1?type=' + type).then((result) => {
                    that.basicMaterialTypeList = result.data.list;
                }, function (result) {
                    that.$alert("获取所有基础材料列表异常", '失败!');
                })
            },


            // 成品配置
            alchemyConfig(type) {
                this.configRadio1 = '全部';
                this.configRadio2 = '全部';
                this.configRadio3 = '全部';
                this.configRadio4 = '全部';
                this.configRadio5 = '全部';
                this.alchemyParams.keyword = '';
                this.alchemyParams.type = type;
                console.log(this.activeName);
                this.showAlchemyModal = true;
                this.searchAlchemy();
            },
            searchAlchemy() {
                this.alchemyParams.page = 1;
                this.searchAlchemyPage(1);
            },
            searchAlchemyPage(page) {
                var that = this;
                that.alchemyParams.page = page;
                api.ajax.get('/life/page/' + that.alchemyParams.rows + '/' + that.alchemyParams.page + '?type=' + that.alchemyParams.type + '&keyword=' + that.alchemyParams.keyword).then((result) => {
                    var data = result.data;
                    that.alchemyData = data.list;
                    that.alchemyTotal = data.total;
                }, function (result) {
                    that.$alert("获取列表异常", '失败!');
                })
            },
            changeConfigRadio(val) {
                if (val == '全部') {
                    this.alchemyParams.keyword = '';
                } else {
                    this.alchemyParams.keyword = val;
                }
                this.searchAlchemy();
            },
            addAlchemy() {
                this.opAlchemyType = 1;
                this.opAlchemyTitle = '新增';
                this.alchemyFormData = {
                    name: '',
                    type: 0,
                    tab: this.tabTypeList[0].value,
                    grade: 1,
                    consume: 20,
                    material1_id: null,
                    count1: 0,
                    material2_id: null,
                    count2: 0,
                    material3_id: null,
                    count3: 0,
                    material4_id: null,
                    count4: 0,
                    material5_id: null,
                    count5: 0
                };
                if (this.activeName == 'forge') {
                    this.alchemyFormData.type = 1;
                } else if (this.activeName == 'sew') {
                    this.alchemyFormData.type = 2;
                } else if (this.activeName == 'alchemy') {
                    this.alchemyFormData.type = 3;
                } else if (this.activeName == 'cooking') {
                    this.alchemyFormData.type = 4;
                } else if (this.activeName == 'engrave') {
                    this.alchemyFormData.type = 5;
                }
                this.getAllBasicMaterial();
                this.showMergeAlchemyDialog = true;
            },
            saveAlchemy() {
                var that = this;
                this.$refs["alchemyForm"].validate((valid) => {
                    if (valid) {
                        if (this.opAlchemyType === 1) {
                            api.ajax.post('life/add', that.alchemyFormData)
                                .then((result) => {
                                    if (result.status == 200) {
                                        that.$message.success('新增成功');
                                        that.showMergeAlchemyDialog = false;
                                        that.searchAlchemy();
                                        that.search();
                                    } else {
                                        that.$message(result.msg);
                                    }
                                }, (result) => {
                                    that.$alert("新增异常", '失败!');
                                })
                        } else {
                            api.ajax.post('life/update', that.alchemyFormData)
                                .then((result) => {
                                    if (result.status == 200) {
                                        that.$message.success('修改成功');
                                        that.showMergeAlchemyDialog = false;
                                        that.searchAlchemy();
                                        that.search();
                                    } else {
                                        that.$message(result.msg);
                                    }
                                }, (result) => {
                                    that.$alert("修改异常", '失败!');
                                })
                        }
                    } else {
                        return false;
                    }
                });
            },
            editAlchemy(row) {
                this.opAlchemyType = 2;
                this.opAlchemyTitle = '编辑';
                this.alchemyFormData = {
                    id: row.id,
                    name: row.name,
                    type: row.type,
                    tab: row.tab,
                    grade: row.grade,
                    consume: row.consume,
                    material1_id: row.material1_id,
                    count1: row.count1,
                    material2_id: row.material2_id,
                    count2: row.count2,
                    material3_id: row.material3_id,
                    count3: row.count3,
                    material4_id: row.material4_id,
                    count4: row.count4,
                    material5_id: row.material5_id,
                    count5: row.count5
                };
                this.getAllBasicMaterial();
                this.showMergeAlchemyDialog = true;
            },
            delAlchemy(row) {
                var that = this;
                api.ajax.delete('life/delete/' + row.id)
                    .then((result) => {
                        if (result.status == 200) {
                            that.$message.success('删除成功');
                            that.searchAlchemy();
                        } else {
                            that.$message(result.msg);
                        }
                    }, (result) => {
                        that.$alert("删除异常", '失败!');
                    })
            },
        },
        activated() {
            this.search();
        },
        created() {
        }
    }
</script>

<style scoped>

</style>
